import React, { Component } from 'react';
import { NavBar,Toast } from 'antd-mobile'
import { good_favlist,good_unfav } from "../api/colloction";
import '../styles/colloction.scss'
class Colloction extends Component {
    constructor(props) {
        super(props)
        this.state = {
            collList:[]
        }
}
    back() {
        this.props.history.goBack()
    }
    async componentDidMount() {
        var res = await good_favlist({ userid: localStorage.getItem('userid') })
        console.log(res.data)
        this.setState({collList:res.data.list})
    }
    handleClick(id) {
        good_unfav({ userid: localStorage.getItem('userid'), goodid: id }).then((res) => {
            console.log(res)
            if (res.data.code===200) {
                Toast.show({
                    icon: 'success',
                    content: '已取消收藏',
                })
                good_favlist({ userid: localStorage.getItem('userid') }).then(res => {
                    console.log(res.data)
                    this.setState({collList:res.data.list})
         })
                
            }
        })
    }
    render() {
        return (
            <div className='colloction'>
                <NavBar onBack={() => { this.back() }}>我的收藏</NavBar>
                {
                    this.state.collList.map((item, index) => {
                        return (
                            <div className='colloction-list' key={index}>
                                <img src={item.pic} alt="" />
                                <div className='colloction-main'>
                                    <p>{item.brandEN +item.brand + item.name}</p>
                                    <div className='colloction-bottom'>
                                    <p>满减</p>
                                        <span>活动价<span className='colloction-span'>￥{parseInt(item.salesPrice.value)}</span></span>
                                        <button onClick={()=>{this.handleClick(item.id)}}>取消收藏</button>
                                    </div>
                                </div>
                           </div>
                             
                         )
                     })
                }
            </div>
        );
    }
}

export default Colloction;